import usePutCommentary from "@/app/[language]/commentary/query/usePutCommentary";
import useWipeCommentary from "@/app/[language]/commentary/query/useWipeCommentary";
import { GetCommentaryAPI } from "@/type/wwwAPI";
import { useTranslations } from "next-intl";
import { useState } from "react";
import ReactTextareaAutosize from "react-textarea-autosize";
import { toast } from "react-toastify";
import {
  Button,
  Col,
  Collapse,
  Form,
  Input,
  ListGroupItem,
  Row,
} from "reactstrap";
import { getDatetime } from "taehui-ts/date";

export default function CommentaryItem({
  commentary: { commentaryID, avatarName, text, date },
}: {
  commentary: GetCommentaryAPI[number];
}) {
  const t = useTranslations();

  const [isModifyOpened, setModifyOpened] = useState(false);
  const [avatarCipher, setAvatarCipher] = useState("");
  const [textInput, setTextInput] = useState("");

  const { mutateAsync: wipeCommentary } = useWipeCommentary();
  const { mutateAsync: putCommentary } = usePutCommentary();

  return (
    <ListGroupItem
      className="route"
      onClick={() => {
        setModifyOpened(true);
      }}
    >
      <Row className="g-0">
        <Col className="m-1" xs="auto">
          <span>{avatarName}</span>
        </Col>
        <Col className="m-1">
          {isModifyOpened ? (
            <ReactTextareaAutosize
              className="form-control"
              defaultValue={text}
              placeholder={t("text")}
              onChange={({ target: { value } }) => {
                setTextInput(value);
              }}
            />
          ) : (
            <span className="ln">{text}</span>
          )}
        </Col>
        <Col className="m-1" xs="auto">
          <span>{getDatetime(date)}</span>
        </Col>
      </Row>
      <Collapse isOpen={isModifyOpened}>
        <Form>
          <Row className="g-0">
            <Col className="m-1">
              <Input
                autoComplete="off"
                valid={!!avatarCipher}
                invalid={!avatarCipher}
                type="password"
                placeholder={t("avatarCipher")}
                value={avatarCipher}
                onChange={({ target: { value } }) => {
                  setAvatarCipher(value);
                }}
              />
            </Col>
            <Col className="m-1" xs="auto">
              <Button
                color="warning"
                onClick={async () => {
                  if (avatarCipher && textInput) {
                    await putCommentary({
                      commentaryID,
                      avatarCipher,
                      text: textInput,
                    });
                  } else {
                    toast.error(t("failedValidation"));
                  }
                }}
              >
                {t("doModifyCommentary")}
              </Button>
            </Col>
            <Col className="m-1" xs="auto">
              <Button
                color="danger"
                onClick={async () => {
                  if (avatarCipher) {
                    await wipeCommentary({ commentaryID, avatarCipher });
                  } else {
                    toast.error(t("failedValidation"));
                  }
                }}
              >
                {t("wipeCommentary")}
              </Button>
            </Col>
          </Row>
        </Form>
      </Collapse>
    </ListGroupItem>
  );
}